<template>
    <div>
        <el-drawer :model-value="isDetailsShow" size="800px" :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false">
            <template #header>
                <h4 style="font-weight: bold;">企业详情</h4>
            </template>
            <table class="tableItem" border="1">
                <tr>
                    <td width="120" class="titleTd redColor"><span>名称*</span></td>
                    <td><el-input disabled v-model="companyInfo.name" style="height: 40px;" placeholder="请输入牛场" /></td>
    
                    <td width="100" class="titleTd redColor"><span>代码*</span></td>
                    <td><el-input disabled v-model="companyInfo.farmCode" style="height: 40px;" placeholder="请输入代码" /></td>
    
                    <td width="120" class="titleTd redColor"><span>创建时间*</span></td>
                    <td>
                        <el-date-picker disabled style="width: 140px;" value-format="YYYY-MM-DD" v-model="companyInfo.buildDate" type="date" placeholder="请选择创建时间" />
                    </td>
                </tr>
                <tr>
                    <td class="titleTd redColor"><span>地址*</span></td>
                    <td colspan="3"><el-input disabled v-model="companyInfo.address" style="height: 40px;" placeholder="请输入地址" /></td>
    
                    <td class="titleTd"><span>单位</span></td>
                    <td><el-input disabled v-model="companyInfo.orgName" style="height: 40px;" placeholder="请输入单位名称" /></td>
                </tr>
                <tr>
                    <td class="titleTd"><span>性质</span></td>
                    <td><el-input disabled v-model="companyInfo.orgType" style="height: 40px;" placeholder="企业性质" /></td>
    
                    <td class="titleTd redColor"><span>负责人*</span></td>
                    <td><el-input disabled v-model="companyInfo.contactUsername" style="height: 40px;" placeholder="请输入负责人名称" /></td>
    
                    <td class="titleTd redColor"><span>联系电话*</span></td>
                    <td><el-input disabled type="number" v-model="companyInfo.contactPhone" style="height: 40px;" placeholder="请输入联系电话" /></td>
                </tr>
                <tr>
                    <td class="titleTd"><span>类型</span></td>
                    <td colspan="3"><el-input disabled type="number" v-model="companyInfo.totalInvestment" style="height: 40px;" placeholder="请输入类型" /></td>
    
                    <td class="titleTd"><span>面积</span></td>
                    <td><el-input disabled type="number" v-model="companyInfo.landArea" style="height: 40px;" placeholder="请输入面积" /></td>
                </tr>
                <tr>
                    <td class="titleTd"><span>类型</span></td>
                    <td colspan="3">
                        <el-radio-group v-model="companyInfo.type" disabled style="margin-left: 10px;">
                            <el-radio :value="2" size="large">国企</el-radio>
                            <el-radio :value="3" size="large">私企</el-radio>
                        </el-radio-group>
                    </td>
                    <td class="titleTd"><span>类型</span></td>
                    <td><el-input disabled type="number" v-model="companyInfo.annualOutput" style="height: 40px;" placeholder="请输入类型" /></td>
                </tr>
                <tr>
                    <td class="titleTd"><span>类型</span></td>
                    <td colspan="5"><el-input disabled type="number" v-model="companyInfo.employeeCount" style="height: 40px;" placeholder="请输入类型" /></td>
                </tr>
                <tr>
                    <td class="titleTd"><span>申报</span></td>
                    <td colspan="2">
                        <!-- <el-select clearable v-model="companyInfo.declaredVariety" placeholder="请选择申报品种">
                            <el-option v-for="(item, index) in breedList" :key="index" :label="item.name" :value="item.value" />
                        </el-select> -->
                        <el-input disabled v-model="companyInfo.declaredVariety" style="height: 40px;" placeholder="请输入类型" />
                    </td>
                    <td class="titleTd"><span>人数</span></td>
                    <td colspan="2"><el-input disabled type="number" v-model="companyInfo.stockCount" style="height: 40px;" placeholder="请输入人数" /></td>
                </tr>
                <tr>
                    <td class="titleTd" style="vertical-align: middle;"><span>类型</span></td>
                    <td colspan="2"><el-input disabled type="number" v-model="companyInfo.breedingBulls" style="height: 40px;" placeholder="请输入类型" /></td>
    
                    <td class="titleTd" style="vertical-align: middle;"><span style="line-height: 18px; font-size: 14px;">类型</span></td>
                    <td colspan="2"><el-input disabled v-model="companyInfo.breedingStation" style="height: 40px;" placeholder="请输入类型" /></td>
                </tr>
            </table>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelHandler">关闭</el-button>
                    <!-- <el-button type="primary" @click="editCompanyHandler">确认</el-button> -->
                </span>
            </template>
        </el-drawer>
    </div>
    </template>
    
    <script setup>
    import { ref, onMounted, onUpdated } from 'vue'
    import { reqGetBreedList } from '@/api/cattleStructure'
    import { reqAddCompanyList, reqGetCompanyInfo } from '@/api/company'
    import { ElMessage } from 'element-plus'
    
    // 接收父组件传递过来的数据
    let props = defineProps(['isDetailsShow', 'detailsId'])
    
    // 注册自定义事件
    let $emit = defineEmits(['closeDetailsDialog'])
    
    // 通过id获取详情
    const getCompanyInfo = async() => {
        let res = await reqGetCompanyInfo({
            id: props.detailsId
        })
        if(res.status == 200){
            Object.assign(companyInfo.value, res.data)
        }
    }
    
    // 收集表单信息
    let companyInfo = ref({
        type: '',
        name: '',
        farmCode: '',
        buildDate: '',
        address: '',
        orgName: '',
        orgType: '',
        contactUsername: '', 
        contactPhone: '',
        totalInvestment: '',
        landArea: '', 
        annualOutput: '', 
        employeeCount: '', 
        declaredVariety: '',
        stockCount: '', 
        breedingBulls: '', 
        breedingStation: '', 
    })
    
    // 获取品种，筛选下拉列表
    let breedList = ref([])
    const getBreedList = async () => {
        let res = await reqGetBreedList()
        breedList.value = res.data
    }
    
    // 确认按钮
    const editCompanyHandler = async () => {
        let res = await reqAddCompanyList(companyInfo.value)
        if(res.status == 200){
            $emit('closeDetailsDialog', false)
            ElMessage({
                message: res.msg,
                type: 'success',
            })
        }
    }
    
    // 关闭按钮
    const cancelHandler = () => {
        $emit('closeDetailsDialog', false)
    }
    
    // 组件挂载完毕
    onMounted(() => {
        getBreedList()
    })
    
    // 组件更新
    onUpdated(() => {
        getCompanyInfo()
    })
    </script>
    <script>
    export default {
        name: 'editCompany'
    }
    </script>
    
    <style scoped lang="scss">
    :deep(.el-drawer__header) {
        margin-bottom: 0;
        color: #000;
    }
    .tableItem{
        width: 100%;
        border-collapse: collapse;
        td{
            border: 1px solid #666666;
            // 表格中的输入框，样式修改
            ::v-deep(.el-input__wrapper) {
                --el-input-border-color: #ffffff;
                --el-input-border-radius: 0px;
                --el-input-focus-border-color: #ffffff;
                --el-input-hover-border-color: #ffffff; 
            }
        }
        .titleTd{
            span{
                line-height: 40px;
                text-align: center;
                display: block;
            }
        }
        tr{
            .redColor{
                color: red;
            }
        }
    }
    </style>